<template>
    <div class="wh-100 p-8">
        <div class="wh-100 overflow-auto" style="background-color: white">
            <div class="container">
                <div class="top">
                    <h4>生源上报字段转换</h4>
                </div>
                <div class="top">
                    <el-button type="primary" @click="showDropdown = true">添加字段</el-button>
                    <div class="right-side">
                        <h4>搜索条件:</h4>
                        <el-input clearable v-model:value="searchForm.schoolName" style="width: 200px"
                                  placeholder="请输入搜索的学校名称"></el-input>
                        <el-button type="primary" @click="searchData">搜索</el-button>
                    </div>
                </div>
                <div class="bottom">
                    <div v-for="(table, index) in tables" :key="index">
                        <h5>高校代码: {{ table.code }} 高校名称: {{ table.schoolName }}</h5>
                        <div style="display: flex;">
                            <table style="margin-bottom: 20px">
                                <thead>
                                <tr>
                                    <th v-for="(header, index) in table.headers" :key="index">
                                        {{ header }}
                                        <button class="remove-button" @click="removeColumn(table.code,header)">
                                            <img src="../dataReportConvert/移除.png" alt="">
                                        </button>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr style="text-align: center;">
                                    <td v-for="(data, index) in table.dataRow" :key="index">{{ data }}</td>
                                </tr>
                                </tbody>
                            </table>
                            <div @click="showAdd(table.code)" class="centered-plus">
                                <span>添加</span>
                                <img src="../dataReportConvert/添加.png" alt=""/>
                            </div>
                        </div>

                    </div>
                </div>
                <Page
                    :current="searchForm.pageNumber"
                    :total="total"
                    :page-size="searchForm.pageSize"
                    @on-change="changePage"
                    @on-page-size-change="changePageSize"
                    :page-size-opts="[5, 10, 20, 50]"
                    size="small"
                    show-total
                    show-elevator
                    show-sizer
                ></Page>

                <el-dialog @close="closeDropdown" title="添加字段" :visible.sync="showDropdown">
                    <div class="dropdown-container">
                        <el-select style="width: 300px" no-match-text="无结果" v-model="code" filterable placeholder="请选择高校">
                            <el-option
                                v-for="item in schoolList"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code">
                            </el-option>
                        </el-select>
<!--                        <el-input v-model="code" placeholder="请输入高校代码" style="width: 200px;" />-->
                        <el-select style="width: 250px" v-model="selectedField" placeholder="请选择转换字段">
                            <el-option v-for="(item,index) in fieldList" :key="index" :value="item.fieldName">
                                {{ item.fieldComment }}
                            </el-option>
                        </el-select>
                        <el-input type="text" v-model="fieldValue" placeholder="请输入转换值" />
                        <el-button type="success" @click="addField">确认添加</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import {
    addFieldApi, delApi,
    getDataApi,
    getFieldListApi, getSchoolListAPI
} from '@/views/sys/dataReportConvert/dataReportConvert';

export default {
    name: 'DataReportConvert',
    components: {},
    data() {
        return {
            tables: [],
            showDropdown: false,
            code: '',
            selectedField: '',
            fieldValue: '',
            headers: [],
            dataRow: [],
            fieldList: [],
            total: 0,
            schoolList: [],
            searchForm: {
                schoolName: '',
                pageNumber: 1,
                pageSize: 5
            }
        };
    },
    mounted() {
        this.getFieldList();
        this.getData();
        this.getSchoolList();
    },
    methods: {
        addField() {
            if (this.selectedField && this.fieldValue) {
                addFieldApi({
                    selectedField: this.selectedField,
                    fieldValue: this.fieldValue,
                    code: this.code
                }).then(res => {
                    console.log(res);
                    this.$message.success('添加成功');
                    this.getData();
                });
                // 清空选择和输入框
                this.selectedField = '';
                this.fieldValue = '';
                this.code = '';
                this.showDropdown = false;
            }
        },
        getSchoolList() {
            getSchoolListAPI().then(res => {
                console.log(res);
                if (res.code === 200) {
                    console.log(res.result);
                    this.schoolList = res.result;
                }

            })
        },
        searchData() {
            this.getData();
        },
        closeDropdown() {
            this.code = '';
            this.selectedField = '';
            this.fieldValue = '';
        },
        removeColumn(code, header) {
            delApi({
                selectedField: header,
                code: code
            }).then(res => {
                console.log(res);
                if (res.result) {
                    this.$message.success('删除成功');
                    this.getData();
                }
            });
        },
        getFieldList() {
            getFieldListApi().then(res => {
                console.log(res, '返回结果');
                if (res.code === 200) {
                    this.fieldList = res.result;
                }
            });
        },
        changePage(v) {
            this.searchForm.pageNumber = v;
            this.getData();
        },
        changePageSize(v) {
            this.searchForm.pageSize = v;
            this.getData();
        },
        showAdd(code) {
            this.code = code;
            this.showDropdown = true;
        },
        getData() {
            getDataApi(this.searchForm).then(res => {
                console.log(res);
                if (res.result) {
                    console.log(res.result.records);
                    this.total = res.result.total;
                    if (Array.isArray(res.result.records)) {  // 确保 res.result 是数组
                        this.tables = [];  // 初始化用于存储多个表格信息的数组
                        res.result.records.forEach(item => {
                            const table = {};  // 定义一个新对象来保存当前表格的信息
                            table.headers = Object.keys(item.object);  // 获取当前对象的所有键作为表头
                            table.dataRow = table.headers.map(key => item.object[key]);  // 根据表头顺序提取值构建数据行
                            table.code = item.code;
                            table.schoolName = item.schoolName;
                            this.tables.push(table);  // 将当前表格添加到 tables 数组中
                        });
                    }
                }
            });
        }
    }
};

</script>
<style scoped lang="less">
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.top, .bottom {
    padding: 20px;
}
.bottom {
    font-size: 14px;
    h5 {
        font-size: 16px;
        margin-bottom: 10px;
    }
}
.top {
    border-bottom: 1px solid #ccc;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    position: relative; /* 确保删除按钮相对表头定位 */
}

th {
    background-color: #f2f2f2;
}

.remove-button {
    position: absolute;
    right: 5px; /* 调整位置以适应图片大小 */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0; /* 去掉默认的内边距 */
}

.remove-button img {
    width: 30px; /* 调整图片大小 */
    height: 30px;
}

.dropdown-container {
    margin-top: 10px;
    display: flex;
}

.right-side {
    display: flex;
    align-items: center; /* 确保内部元素垂直居中 */
}

.right-side .el-input,
.right-side .el-button {
    margin-left: 10px; /* 为输入框和按钮之间添加一些间距 */
}

.top {
    display: flex;
    justify-content: space-between; /* 使子元素在主轴上两端对齐 */
    align-items: center; /* 在交叉轴上居中对齐 */
}

.centered-plus {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    width: 100px;            /* 设置宽度，根据需要调整 */
    height: 100px;           /* 设置高度，根据需要调整 */
    img {
        width: 30px;
        height: 30px;
    }
}
</style>